<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-mobile p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.promotion')}}</li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">
            <div id="main" class="card-box col-10  yqljwx">
                <div class="row justify-content-md-center my-3">
                    <div class="col-10 header-title">
                        <h3>{{$t('breadcrumb.promotion')}}</h3>
                    </div>
                </div>
                <div class="row justify-content-md-center my-3">
                    <div class="col-10">
                        <div class="text-center">
                            <figure class="figure">
                                <img class="figure-img img-fluid rounded border" :src="qrDataUrl">
                                <figcaption class="figure-caption">{{$t('msg.invitation.code')}}{{invent_code}}</figcaption>
                            </figure>
                        </div>

                        <p class="d-flex justify-content-center">
                            <span class="align-self-center">{{$t('msg.invitation.link')}}</span>
                            <span type="text" class="form-control mr-3 bg-light w-auto">{{url+invent_code}}</span>
                            <button ref="copy" type="button" class="btn btn-gradient btn-sm"
                                    :data-clipboard-text="url+invent_code">{{$t('btn.clipboard.copy')}}
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import QRCode from 'qrcode';
import Clipboard from 'clipboard';

export default {
    name: "profilePromoter",
    data() {
        return {
            url: 'https://user.fxtradelink.com/#/register?invent_code=',
            invent_code: '',
            qrDataUrl: '',
            copy: null,
            t: {
                "ok": this.$t('btn.ok'),
                "msg_suc": this.$t('msg.clipboard.success'),
                "msg_err": this.$t('msg.clipboard.fail'),
            }
        }
    },
    mounted() {
        const vm = this;
        this.copy = new Clipboard(this.$refs.copy);
        this.copy.on('success', function () {
            swal({
                title: vm.t.msg_suc,
                button: {
                    text: vm.t.ok,
                    className: 'btn btn-gradient',
                }
            })
        }).on('error', function () {
            swal({
                title: vm.t.msg_err,
                button: {
                    text: vm.t.ok,
                    className: 'btn btn-gradient',
                }
            })
        });
    },
    created() {
        const vm = this;
        const api = vm.api;
        const http = vm.$http;
        vm.qrcode(vm.url + vm.invent_code)

        http.get(api + 'UserInfo/agenturl')
            .then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.invent_code = data.data.url;
                    vm.qrcode(vm.url + vm.invent_code)
                }
            })
            .catch(function (error) {
                console.log(error)
            });
    },
    methods: {
        qrcode(text) {
            const vm = this;
            QRCode.toDataURL(text)
                  .then(url => {
                      vm.qrDataUrl = url;
                  })
                  .catch(err => {
                      console.error(err)
                  })
        }
    }
}
</script>
